<template>
    <div style="margin-top: 15px;" id="app">
        <el-col :span="16" :offset="5">
        <el-button type="danger" @click="batchDelete(tableChecked)" plain>批量删除</el-button>
        <el-input placeholder="请输入内容" style="width:400px" v-model="input" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
                <el-option label="编号" value="1"></el-option>
                <el-option label="姓名" value="2"></el-option>
            </el-select>
            <el-button slot="append" v-on:click="salaryFind(input)" icon="el-icon-search">查询</el-button>
            </el-input>
            <el-button type="warning" @click="setExcel=true" plain>导出为excel文件</el-button>
        </el-col>
            <!-- ref="mytable"
                :row-key="getRowKeys" 
            -->
        <el-table
                v-loading="loading"
                :data="tableData"
                @selection-change="handleSelectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55"
                    :reserve-selection="false">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="编号"
                    sortable
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="basicSalary"
                    label="基础工资"
                    sortable
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="profitBonus"
                    label="业绩加成"
                    sortable
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="salary"
                    label="最终工资"
                    sortable
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="datetime"
                    label="发薪日"
                    sortable
                    width="180">
            </el-table-column>
            <el-table-column align="right" width="180">
                <!-- <template slot="header" slot-scope="scope"> -->
                <template slot="header">
                    <el-button type="primary" @click="add=true" size="mini" plain>添加</el-button>
                    
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="edit=true;getid(scope.row.id)" plain>编辑</el-button>
                    <el-button size="mini" type="danger" @click="salaryDelete(scope.row.id)" :disabled="scope.row.type == -1" plain>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                style="margin: 15px 0px;"
                prev-text="上一页" next-text="下一页" background
                layout="prev, pager, next, sizes, jumper, total"
                :page-sizes="[5,10,20,40]"
                :page-size="pageSize"
                :total="total"
                :current-page="pageNow"
                @current-change="findPage"
                @size-change="findSize">
        </el-pagination>
        <el-dialog title="新增薪资信息" :visible.sync="add" width="30%">
            <el-form ref="form" :rules="salaryRules" :model="form" label-width="80px">
                <el-form-item label="编号" prop="id">
                    <el-input v-model="form.id"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="基础工资" prop="basicSalary">
                    <el-input v-model="form.basicSalary"></el-input>
                </el-form-item>
                <el-form-item label="业绩加成" prop="profitBonus">
                    <el-input v-model="form.profitBonus"></el-input>
                </el-form-item>
                <el-form-item label="最终工资" prop="salary">
                    <el-input v-model="form.salary"></el-input>
                </el-form-item>
                <el-form-item label="发薪日" prop="datetime">
                    <el-date-picker v-model="form.datetime" type="datetime" placeholder="选择日期" style="width:100%;" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                </el-form-item>
                <el-form-item label="员工编号" prop="wid">
                    <el-input v-model="form.wid"></el-input>
                </el-form-item>               
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="add = false">取 消</el-button>
            <el-button type="primary" @click="add = false;salaryAdd('form')">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog title="修改薪资信息" :visible.sync="edit" width="30%">
            <el-form ref="eform" :rules="salaryRules" :model="eform" label-width="80px">
                <el-form-item label="编号" prop="id">
                    <el-input v-model="eform.id" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="eform.name"></el-input>
                </el-form-item>
                <el-form-item label="基础工资" prop="basicSalary">
                    <el-input v-model="eform.basicSalary"></el-input>
                </el-form-item>
                <el-form-item label="业绩加成" prop="profitBonus">
                    <el-input v-model="eform.profitBonus"></el-input>
                </el-form-item>
                <el-form-item label="最终工资" prop="salary">
                    <el-input v-model="eform.salary"></el-input>
                </el-form-item>
                <el-form-item label="发薪日" prop="datetime">
                    <el-date-picker v-model="eform.datetime" type="date" placeholder="选择日期" style="width:100%;" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="员工编号" prop="wid">
                    <el-input v-model="eform.wid"></el-input>
                </el-form-item>     
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="edit = false">取 消</el-button>
            <el-button type="primary" @click="edit = false;salaryEdit('eform')">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog title="导出为excel文件" :visible.sync="setExcel" width="30%">
            <el-form ref="exce"  label-width="120px">
                <el-form-item label="导出文件夹路径">
                    <el-input v-model="exce.path"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="setExcel = false">取 消</el-button>
            <el-button type="primary" @click="setExcel = false,excel(exce.path)">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import axios from 'axios'
    var list = [];
    // export function validateAccountNumber(str) {
    //     const reg = /^([1-9]{1})$/
    //     return reg.test(str)
    // }
    import { MessageBox } from 'element-ui';
    export default {
        data() {
            let num = /[0-9]{0,11}/;
            let isNum = (rule, value, callback) => {
                if(value==''||value==undefined){
                    callback()
                }else{
                    if (!num.test(value)) {
                    return callback(new Error('格式错误'))} else {
                    callback()
                    }
                }
            };
            return {
                input: '',
                input1:{
                    id:'',
                    name:'',
                    basicSalary:'',
                    profitBonus:'',
                    salary:'',
                    datetime:'',
                },
                select: '请选择',
                tableData:null,
                search:'',
                add:false,
                tableChecked:[],//被选中
                ids:[],
                edit:false,
                loading: false,
                TiShen:[],
                activeIndex: this.$route.path,
                form:{
                    id:'',
                    name:'',
                    basicSalary:'',
                    profitBonus:'',
                    salary:'',
                    datetime:'',
                    wid:'',
                },
                eform:{
                    id:'',
                    name:'',
                    basicSalary:'',
                    profitBonus:'',
                    salary:'',
                    datetime:'',
                    wid:'',
                },
                total:0,//总页数，从后台查询
                pageNow:1,//当前页数，默认为1
                pageSize:20,//当前页显示的数据条数，默认为20
                getRowKeys(row){//获取row的key值
                    return row.id;
                },
                setExcel:false,
                getExcel:false,
                exce:[
                    {
                        path:'',
                    }
                ],
                //验证对象
                salaryRules:{
                    id:[
                        { required: true, message: '编号为必填项', trigger: 'blur' },
                    ],
                    //校验姓名
                    name:[
                        { required: true, message: '姓名为必填项', trigger: 'blur' },//必填项验证
                        { min:0,max:10, message: '姓名在 1 ~ 12 个字符', trigger: 'blur' },
                    ],
                    basicSalary:[
                        { required: true, message: '基础工资为必填项', trigger: 'blur' },
                        { min:0,max:11, message: '工资 0 ~ 11 位', trigger: 'blur' },
                        {validator:isNum}
                    ],
                    profitBonus:[
                        { required: true, message: '业绩加成为必填项', trigger: 'blur' },
                        { min:0,max:11, message: '工资 0 ~ 11 位', trigger: 'blur' },
                        {validator:isNum}
                    ],
                    salary:[
                        { required: true, message: '最终工资为必填项', trigger: 'blur' },
                        { min:0,max:11, message: '工资 0 ~ 11 位', trigger: 'blur' },
                        {validator:isNum}
                    ],
                    wid:[
                        { required: true, message: '编号为必填项', trigger: 'blur' },
                    ],
                },
                
            }
        },
        methods:{
            excel(path){
                const _this = this
                path=path+"/salary.xls"
                console.log(path)
                this.$http.post("salary/exportExcel",path).then(function(resp){
                    console.log(resp.data)
                    if(resp.data.code!=2000){
                        _this.$message.error(resp.data.msg);
                    }else{
                        _this.$message.success("导出成功");
                    }
                })
            },
            salaryEdit(formName){
                const _this = this
                this.$refs[formName].validate(valid=>{
                    if(valid){
                        console.log(this.eform);
                        this.$http.post("salary/update",this.eform).then(function(resp){
                            if (resp.data.code == 2000) _this.$message.success("修改成功")
                            console.log(resp);
                            location.reload();
                            // console.log(this.eform);
                        });
                    }else{
                        this.$message.error("信息填写错误")
                    }
                })
            },
            getid(id){
                const _this = this
                this.$http.post("salary/findOne",id).then(function(resp){
                    console.log(resp.data.data[0]);
                    console.log(resp.data.data[0].id);
                    _this.eform.id=resp.data.data[0].id,
                        _this.eform.name=resp.data.data[0].name,
                        _this.eform.basicSalary=resp.data.data[0].basicSalary,
                        _this.eform.profitBonus=resp.data.data[0].profitBonus,
                        _this.eform.salary=resp.data.data[0].salary,
                        _this.eform.datetime=resp.data.data[0].datetime,
                        _this.eform.wid=resp.data.data[0].wid
                })
            },
            salaryDelete(id){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post("salary/delete",id)
                    location.reload();
                    this.$message({
                            type: 'success',
                            message: '删除成功!'
                        }
                    );
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            salaryAdd(formName){
                const _this = this
                this.$refs[formName].validate(valid=>{
                    if(valid){
                        console.log(this.form);
                        this.$http.post("salary/save",this.form).then(function(resp){
                            if (resp.data.code == 2000) _this.$message.success("修改成功")
                            console.log(resp);
                            location.reload();
                            console.log(this.form);
                        });
                    }else{
                        this.$message.error("信息填写错误")
                    }
                })
            },
            salaryFind(input){
                const _this = this
                if(input!==null&&input!==''&&this.select=="1"){
                    this.$http.post("salary/findOne",input).then(function(resp){
                        console.log(resp.data.data);
                        _this.tableData=resp.data.data
                    })
                }else if(input!==null&&input!==''&&this.select=="2"){
                    this.$http.post("salary/findByName",input).then(function(resp){
                        console.log(resp.data);
                        _this.tableData=resp.data.data
                    })
                }else{
                    // this.$http.post("salary/findSalaryAll").then(function(resp){
                    //     console.log(resp.data.data);
                    //     _this.tableData=resp.data.data
                    // })
                    this.findAllTableDataByPage();
                }
            },
            findPage(page){
                console.log("当前页数："+page);
                this.pageNow=page;
                this.findAllTableDataByPage();
            },
            findSize(size){
                console.log("当前页面记录条数："+size);
                this.pageSize=size;
                this.findAllTableDataByPage();
            },
            findAllTableDataByPage(){
                this.$http.get("salary/findByPage?pageNow="+this.pageNow+ "&pageSize=" + this.pageSize).then((res)=>{
                    // console.log(res.data);
                    this.tableData=res.data.salaries;
                    this.total=res.data.total;
                });
            },
            handleSelectionChange(val){
                console.log("handleSelectionChange--",val)
                this.tableChecked=val
            },
            batchDelete(){//批量删除
                this.$confirm('此操作永久删除【'+this.tableChecked.length+'】条记录，是否继续？','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(()=>{
                    let ids='?';
                    this.tableChecked.forEach(item=>{
                        ids+='ids='+item.id+'&';
                    })
                    this.$http.get("salary/batchDelete"+ids).then(resp=>{
                        if(resp){
                            // this.findAllTableDataByPage();
                            location.reload();
                            // log.console(ids);
                        }
                    })
                }).catch(()=>{
                    this.$message({
                        type:'info',
                        message:'已取消删除'
                    });
                });
            },
        },
        created(){
            this.findAllTableDataByPage();
        }
    }
</script>

<style>
    body {
        margin: 0;
    }
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    .page{
        float: right;
    }
</style>